<template>
  <div id="app" class="container">
    <div class="l-container">
      <draggable
        v-model="list1"
        draggable=".c-item"
        v-bind="dragOptions"
        :options="{
          sort: false,
          group: { name: 'field', pull: 'clone', put: false },
        }"
      >
        <div class="item c-item" v-for="d in list1" :key="d.id">
          <i :class="d.icon"></i>
          <p>{{ d.name }}</p>
        </div>
      </draggable>
    </div>
    <div class="c-container">
      <draggable
        group="field"
        :list="list2"
        v-bind="dragOptions"
        @change="toChange"
        style="border: 1px solid #ccc; height: 100%"
        @add="hanldeAdd"
      >
        <div v-for="(d, index) in list2" :key="index" class="item">
          <template v-if="d.type === 'input'">
            <el-input
              v-model="d.defaultValue"
              placeholder="请输入内容"
              :disabled="d.disabled"
            ></el-input>
          </template>
          <template v-if="d.type === 'button'">
            <el-button :type="d.btnType" :disabled="d.disabled">{{
              d.defaultValue
            }}</el-button>
          </template>
          <template v-if="d.type === 'rate'">
            <el-rate v-model="d.defaultValue"></el-rate>
          </template>
          <template v-if="d.type === 'select'">
            <el-select v-model="d.defaultValue" placeholder="请选择">
              <el-option
                v-for="item in d.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
          <template v-if="d.type === 'cascader'">
            <el-carousel height="300px">
              <el-carousel-item v-for="item in d.defaultValue" :key="item.url">
                <img
                  style="width: 100%; height: 100%"
                  :src="item.url"
                  alt=""
                  srcset=""
                />
              </el-carousel-item>
            </el-carousel>
          </template>
        </div>
      </draggable>
    </div>
    <div class="r-container">
      <!-- {{ list1 }}
      <br />
      {{ list2 }} -->
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <!--       {{ list2 }} -->
        <el-tab-pane label="页面样式" name="first"
          ><!-- 页面样式 --></el-tab-pane
        >
        <el-tab-pane label="组件配置" name="second">
          <el-form ref="form" :model="form" label-width="120px">
            <el-form-item label="组件名称：">
              <el-input
                v-model="nowComponent.defaultName"
                :disabled="nowComponent.disabled"
              ></el-input>
            </el-form-item>
            <el-form-item label="是否可修改：">
              <el-switch
                v-model="nowComponent.disabled"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </el-form-item>
            <el-form-item
              label="按钮类型"
              v-if="nowComponent.type === 'button'"
            >
              <el-radio-group v-model="nowComponent.btnType">
                <el-radio-button label="primary">主要按钮</el-radio-button>
                <el-radio-button label="success">成功按钮</el-radio-button>
                <el-radio-button label="info">信息按钮</el-radio-button>
                <el-radio-button label="warning">警告按钮</el-radio-button>
                <el-radio-button label="danger">危险按钮</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              label="轮播图片链接"
              v-if="nowComponent.type === 'cascader'"
            > 
                <div v-for="(item,index) in nowComponent.defaultValue" :key="index">
                    value{{index}}: <el-input v-model="item.url" /> <el-button @click="deleteItem(index)">删除</el-button>
                </div>
            </el-form-item>
            <el-form-item
              label="下拉选中的值"
              v-if="nowComponent.type === 'select'"
            > 
                <div v-for="(item,index) in nowComponent.options" :key="index">
                    value{{index}}: <el-input v-model="item.label" /> <el-button @click="deleteItem(index)">删除</el-button>
                </div>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import draggable from "vuedraggable";
import lists from "./config/lists";
export default {
  components: {
    draggable,
  },
  data() {
    return {
      dragOptions: { animation: 500 },
      list1: lists,
      list2: [],
      activeName: "first",
      nowComponent: {},
      form: {},
    };
  },
  computed: {
    nowComponentDetails() {
      return JSON.parse(JSON.stringify(this.nowComponent));
    },
  },
  watch: {},
  methods: {
    hanldeAdd(data) {
      console.log(data, "item");
      console.log(lists[data.oldIndex], "==============");
      this.activeName = "second";
      //this.list2.push(lists[data.oldIndex])
      this.nowComponent = lists[data.oldIndex];
    },
    toChange() {},
    handleClick() {},
    deleteItem(index){
        console.log(index,'4566')
        this.nowComponent.options.splice(index,1)
    }
  },
};
</script>

<style lang="scss">
* {
  padding: 0;
  margin: 0;
}
html,
body {
  height: 100%;
}
.container {
  display: flex;
  height: 100%;
  .l-container {
    flex: 1;
    display: flex;
    justify-content: space-around;
    .ul {
      border: 1px solid #ddd;
      margin: 0 20px;
      display: flex;
      padding: 10px;
    }
    .item {
      border: 1px solid #999;
      width: 80px;
      display: inline-block;
      text-align: center;
      font-size: 14px;
      border-radius: 10px;
    }
  }
  .c-container {
    flex: 1;
    border: 1px solid #0f0;
    height: 100%;
    box-sizing: border-box;
  }
  .r-container {
    flex: 1;
  }
}
</style>
